<script lang="ts" setup>
import {ref,onMounted} from 'vue'

const year = ref<number>(0);
const month = ref<number>(0);
const day = ref<number>(0);
const hours = ref<number>(0);
const minutes = ref<number>(0);
const seconds = ref<number>(0);

onMounted(()=>{
    timeupdate();
})

const timeupdate = function(){
    setInterval(function(){
        const date = new Date();
        year.value=date.getFullYear();
        month.value=date.getMonth()+1;
        day.value=date.getDate();
        hours.value=date.getHours();
        minutes.value=date.getMinutes();
        seconds.value=date.getSeconds();
    },1);
}

// 禁止选择
import { forbidSelect, windowPosition } from '../composables/common'
windowPosition();
forbidSelect()
// 右键菜单
import rightMenu from '../components/rightMenu.vue';

windowPosition();
import { appWindow } from '@tauri-apps/api/window'
appWindow.setResizable(false);
</script>

<template>
    <div  class="con">
        <div class="time" ref="timedom">
            {{ (hours<10?'0'+hours:hours) + ':'+ (minutes<10?'0'+minutes:minutes) + ':' + (seconds<10?'0'+seconds:seconds) }}
        </div>
    </div>
    <right-menu></right-menu>
</template>

<style scoped>
.con{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:default
}

.time{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 60px;
    font-weight: bold;
    /* background: black; */
    color: rgba(123, 123, 123, 1);
    cursor:default
}

</style>